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GRAPHICAL USER INTERFACE FOR EXPANDABLE MENUS 



Field of the invention 
5 The present invention relates generally to graphical user interfaces 

presentable on displays for e.g. computers, television sets and so on. The invention 
is however particularly suitable for small displays, such as those used in cellular or 
mobile phones, and offers an improved solution for displaying and navigating in 
menus in a comprehensible manner. 

10 

Background 

Since the end of the 2000 th century the cellular telephone industry has had 
enormous development in the world. The first commercially attractive cellular 
telephones or terminals were introduced in the market at the end of the 1980's. 

1 5 Since then, a lot of effort has been made in making smaller terminals, with much 
help from the miniaturisation of electronic components and the development of 
more efficient batteries. Today, numerous manufacturers offer pocket-sized 
terminals with a wide variety of capabilities and services, such as packet-oriented 
transmission and multiple radio band coverage. 

20 The development in electronics has come to the point where a further 

miniaturisation of the terminals might cause some drawbacks - not the size itself but 
the capability to handle the keypad and reading the display. However, the display 
has in fact become larger and larger at the same time as the size of the total terminal 
has decreased. For several years it has been expected that the design of the terminals 

25 will become more alike the small pocket computers known as personal digital 
assistants (PDA), with only few buttons or keys and a large display substantially 
covering the entire front side of the terminal. In any case, the terminal display will 
still be quite small and therefore not suitable for presentation of large volumes of 
data. Still, already today the terminals are quite capable and have a lot of technical 

30 functions and can be used for many different services. In order to navigate through 
the different options and actions that are selectable, the terminals are generally 
devised with some form of menu information system. When browsing through such 
menus more text than fits the screen must generally still be viewed. Furthermore, in 
many cases the menu items themselves are sub-menus in which further browsing 

35 can be made. When the display is very small, which would still be the case even if 
the display would cover the entire front-side of the phone, it is not possible to 
expand menus horizontally more than maybe a few pixels. Most menus for portable 
terminals therefore expand vertically or open up into a whole new screen mode. 



■ 

CONFIRMATION COPY 



WO 03/104964 PCT/EP03/05842 

2 

One problem with drop-down menus is that they cover what is beneath them 
when they unfold. Most times the menu-items of terminal menu are arranged in the 
order of expected frequency of use. This means that when the menu drops down to 
expand it covers items which are frequently used i.e. those immediately below the 
5 expanded menu item, but leaves the not so frequently used menu items further down 
the list still visible. Another problem with drop down menus is that there is no 
hierarchical feeling visualising the interdependence between the different menus, 
and no good way to present several drop-downs within each other. 

US 5801703 disclose a method and an apparatus for selectable expandable 
10 menus for computers. According to the proposed solution, expanded menu panels 
within a given master menu are expanded in place, leaving the relative order of 
menu items intact. However, the sub-menus or expanded menu items are simply 
presented oh a larger space in the main menu without a clear identification of the 
hierarchical structure. 

15 

Summary of the invention 

Consequently it is an object of the present invention to overcome the above- 
identified deficiencies related to the identified field and to the prior art thereof. 
More specifically, it is an object of the invention to provide an improved solution 

20 for expandable menus suitable for small displays. 

According to a first aspect of the invention, this object is fulfilled by a 
graphical user interface for a display devised for presentation of hierarchical 
information, which user interface comprises a first menu field carrying a list of 
menu items, at least one of said menu items indicating a sub-menu field which is 

25 expandable within said first menu field. The user interface further comprises a 

graphical layer effect, which is applied to an expanded sub-menu field, such that the 
sub-menu field is displayed as an underlying layer to the first menu field. This 
provides an improved solution for displaying menus, particularly on small displays, 
without distorting the sense of hierarchy between two or more menus. 

30 Preferably, the graphical user interface is devised such that for an expanded 

submenu field, located between two menu items, the first menu field is displayed as 
being separated into two first menu fields revealing said underlying layer there 
between. This way, the submenu will not cover the first main menu. 

In one embodiment the graphical effect comprises the visualisation of an 

35 edge between displayed layers. This gives a user or viewer of the display a further 
improved sense of the menu hierarchy, by presentation of a submenu as a lying 
under the first main menu and thus providing a level effect. Optionally or 
additionally, the graphical effect may comprise the visualisation of a shadow on an 
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underlying layer from an overlying layer, which also creates or enhances the level 

effect between the menus . 

In one embodiment a displayed overlying layer is defined by a field enclosed 
by a contour having rounded corners. Optionally or additionally a displayed 

5 overlying layer may be defined by a field enclosed by a contour having comers with 
an inner angle of more than 90°. A graphical user interface is generally looked upon 
as, an is indeed designed to be, an illustration of a physical structure, e.g. in the case 
of menus as a pile of papers or files. Furthermore, such physical objects rarely have 
comers that are more sharp than 90°. Rather, if such comers are not straight, they 

10 are generally slightly rounded or at least less sharp than 90°. For a viewer it is 
therefore natural to perceive a field according to this embodiment as the higher 
level. 

The menu item for an expanded submenu field may further be displayed in 
the underlying layer of the submenu field. This provides an improved connection 

15 between the menus. 

Preferably, the parameter headings in said first menu field are arranged in an 
order determined by frequency of use. This way, if the display is smaller than the 
- expanded menu, the menu items of less significance, located under an opened 
submenu, are shifted downwards and out of the display upon expansion rather than 
20 the upper more significant items. 

In one embodiment a selection indicator comprises a contour formed around 
a selected menu item in a list, and a graphical layer effect to said contour, e.g. 
according to the above. 

Furthermore, the graphical user interface may comprise an item triggering 
25 field which can be activated to trigger an action associated with a menu item 
selected by said selection indicator. 

According to a second aspect, the present invention fulfils the stated objects 
by a graphical interface system, which comprises a display connected to a 
microprocessor unit, and a computer program including computer program code. 
30 According to the invention the computer program code will, when executed by the 
microprocessor unit, trigger the microprocessor unit to present, on said display, the 
graphical user interface as described above. 

According to a third aspect of the invention, the objects stated are further 
fulfilled by a computer program product for a graphical user interface system, 
35 which system comprises a micro-processor unit and a display, wherein said 
computer program product includes the computer program code as mentioned 
above. 
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According to a fourth aspect the present invention relates to a portable 
communication terminal comprising a display and means for executing 
presentations on said display of the graphical user interface according to the above. 



5 Brief description of the drawings 

The features and advantages of the present invention will be more 
apparent from the following description of the preferred embodiments with 
reference to the accompanying drawings, on which 

Figs la-lc schematically illustrates a graphical user interface according 
10 to an embodiment of the present invention; 

Figs 2a-2b schematically illustrates a second embodiment of the 
graphical user interface according to the present invention; 

Fig 3 illustrate by way of example included and connectable parts of a 
graphical interface system according to an embodiment of the present invention; 
1 5 Fig 4 shows a first embodiment of a portable communication terminal 

on which the graphical user interface of the present invention may be applied; 

Fig 5 shows a second embodiment of a portable communication 
terminal suitable for use with an embodiment of the graphical user interface 
according to the present invention; and 
20 Figs 6-8 schematically illustrate embodiments for achieving a layered 

graphical effect between different levels of menus. 



Detailed description of preferred embodiments 

As described in claim 1 the graphical user interface of the invention 

25 involves a graphical layer effect for separating sub-menus that are presented in the 
same screen as higher hierarchy menus. Figs la-lc show a graphical user interface 
displaying the main menu 1 "Picture Options". Within that menu there are six 
different menu items 2, of which the second "Send" encloses a sub-menu, indicated 
by the arrow for that item. Scrolling in the menu may be performed by using arrow 

30 keys of a connected key pad, by using a mouse or joy stick, or simply by directly 
marking the selected menu item by use of a suitable tool if the display is touch 
sensitive. A selected menu item is indicated using a selection indicator 7, which in 
figure la is located at the first menu item of menu L In figure lb the selection 
indicator 7 is moved down one step to the second menu item "Send" for instance by 

3 5 any of the aforementioned means for scrolling to or selecting an item. In order to 
activate a selected menu item different solutions may be used. One of those is to use 
a specific key of associated apparatus, such as the "Yes" key of a mobile phone, by 
double clicking on a mouse pointing to a selected item, or using a tool for pressing a 
separate item triggering field 9. Since, in this case, the selected menu item is the 
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entrance to a sub-menu, the activation of the selected item will unfold that sub- 
menu. 

Fig lc discloses the advantageous way according to the invention of 
displaying a sub-menu 3 within a given main menu 1 . The graphical layer effect of 
5 the invention is used to split up the main menu field 1 into two parts la and lb, 
between which an underlying layer 3 comprising the sub menu is shown. There are 
different ways of using a graphical layer effect for displaying the sub-menu as an 
underlying layer. In one embodiment the contour 5 delimiting the main menu la, lb 
from sub-menu 3 is designed such that a graphical depth is perceived by the viewer. 
10 The graphical layer effect can be seen in figs la-2b but is more clearly illustrates in 
figs 6-8. Fig 6 illustrates an example wherein the graphical layer effect is an 

♦ 

auxiliary contour 4 presented as a shadow of the contour 5 of the main menu 1. In 
fig 8 the graphical layer effect is achieved by a shadow 4 projected on the sub-layer 
3 from the overlaying layer of the main menu 1 , whereas fig 7 illustrates an 
1 5 embodiment in which the upper layer 1 is presented as having a certain thickness 
and therefore a side edge for down towards the lower layer 3. As a person skilled in 
the art would realise these are merely examples of how the layer effects can be 
presented. 

Another feature useable for presenting the menus at seemingly different 

20 layers are to use rounded corners for the overlying layer 1 . This is visible both in 
figs la-2b and in figs 6-8, wherein 6 denotes a rounded comer in delimiting contour 
5 of the upper layer 1 or la, lb. By viewing a graphical user interface for instance 
as presented in fig lc, the viewer will automatically perceive layer la, lb as lying 
over layer 3. It should be noted that even though, in the shown embodiments, the 

25 sub-menu is presented as a underlying layer to the main menu, the opposite relation 
could of course also be used, wherein a sub-menu 3 is presented as an overlying 
layer with a graphical layer effect 4, 6 with a shadow or edge feature and/or 
rounded corners of the sub-menu field 3 . Instead of using rounded comers, the 
corner portions may be segmented (not shown) such that each comer has an inner 

30 angle of more than 90°, e.g. in the shape of a diagonally cut off comer. The same 
effect is obtained, wherein the field with rounded or cut off comers will be 
perceived by a viewer as lying on top of a neighbouring field. 

The sub-menu could be closed in any of a number of ways: it can be 
closed when an item is activated, when a user scrolls out of the sub-menu, when the 

35 title is selected and activated, or with another closing function. If the item 2 

containing the sub-menu is at the top of the screen the expansion of the sub-menu is 
preferably downwards, in other words the lower part lb of the main menu 1 slides 
downwards to create the gap 3 in which the sub-menu is visualised. However, if the 
item cont aining the sub-menu is at the bottom of the screen, the expansion will 
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preferably be upwards, sliding the upper part la of the main menu upwards. The 
menu list order is however still intact, and the items with highest priority is still 
seen beneath the sub-menu expansion. In the preferred embodiments, as illustrated 
in the figs la-2b, the title of the menu item "send" or "zoom" remains on the screen 
5 in the sub-menu 3 as a heading for the options, which makes it very easy to see to 
which menu item the displayed options belong. 

Figs 2a and 2b show an alternative embodiment to that of fig la-lc, 
wherein the submenu of an item 2 contains multiple options for a certain parameter, 
in this case "Zoom". According to this embodiment, the current setting of that 

10 parameter, "50%" in the example of the drawing, is displayed with the menu item 2 
also in the main menu 1 . This information is thus accessible without having to open 
up the submenu field 3, wherein fewer actions are needed to gain desired 
knowledge of the current status. 

Fig 3 discloses a graphical interface system according to an 

1 5 embodiment of the invention. As display 2 1 is communicatively connected to a 
microprocessor unit 22, which in turn includes at least a computer processor CPU 
and an internal memory MEM. The hardware of the microprocessor unit is further 
associated with a computer program product comprising software for handling the 
presentation of information on the display 21, by use of a graphical user interface 

20 according to the present invention. In order to input data to the microprocessor unit 
22, some form of data input means are preferably connectable thereto, for instance a 
key board or a key pad 23 and/or a cursor control device 24 such as a mouse, a track 
ball or a joy stick. The microprocessor unit 22 may also be connectable to a an 
external memory or database 25, in the embodiment of the communication terminal 

25 such as a mobile phone, memory 25 may be or correspond to a subscriber 

identification module SIM connectable to the terminal. According to the invention, 
the computer program product comprises computer program code which can be 
stored in the memory MEM of the microprocessor unit 22 and which, when 
executed by the microprocessor unit, triggers the microprocessor unit to present a 

30 graphical user interface according to what has been described in relation to figs la- 
2b and figs 6-8, on the display 21. 

Fig 4 shows an example of a portable communication terminal, such as 
a mobile phone 30, of more or less standard appearance. A portable communication 
terminal includes all mobile equipment devised for radio communication with a 

35 radio station, which radio station may also be a mobile terminal or for instance a 
stationary base station. Consequently, the term portable communication terminal 
includes mobile phones, pagers, communicators, electronic organizers, smart 
phones, PDA:s (Personal Digital Assistance), vehicle mounted radio 
communication devices or the like as well as portable laptop computer devised for 
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wireless communication in for instance a WLAN (Wireless Local Area Network). 
Furthermore, since the graphical user interface of the present invention, as such, is 
not restricted to wireless use, it should be noted that the present invention is also 
applicable to standard desktop computers, television sets, fax machines or the like. 
5 The terminal 30 of fig 4 comprises a chassis or housing 3 1 , carrying a user audio 
input in the form of a microphone 32 and a user audio output in the form of a 
speaker 33 or connected to an ear piece (not shown). A set of keys, buttons or the 
like constitutes a data input interface 23 useable for instance for dialling according 
to the established art. The data output interface comprises a display 21 devised to 

10 present communication information by use of graphical user interface in accordance 
with the present invention. 

Fig 5 shows a different embodiment of a portable communication 
terminal 30, in which like features carry the same references as in fig 4. A 
difference between embodiments of figs 5 and 4 is mainly that a larger part of the 

15 front face of the terminal in fig 5 is occupied of the display 21, to which several of 
the functions of the key board 23 has been transferred. By pressing directly on the 
screen of display 21 , by use of the fingers or a specific tool 34, the number of 
buttons has been decreased and remaining keys are preferably moved to the side or 
sides of the terminal 30. 'Even with the design as illustrated in fig 5, the display 21 

20 will generally be quite small compared to at least a standard desktop computer, and 
consequently the expandable menu system using a graphical layer effect according 
to the present invention will be highly suitable also for future portable terminals as 
that of fig 5. 

The foregoing has described the principles, preferred embodiments and 
25 modes of operation of the present invention. However, the invention should not be 
construed as limited to the particular embodiments discussed. For example, any or 
all of the disclosed embodiments for achieving a graphical depth effect as disclosed 
on figs 6-8 including the use of rounded comers can be used either isolated or in 
combination. Furthermore, the use of a graphical depth effect also on a selection 
30 indicator 7 devised to show which menu item is currently selected further increases 
the ease of use, since the selected item will then always appear as a higher layer 
than the currently active menu or sub-menu. 

The above described embodiments should be regarded as illustrative 
rather than restrictive, and it should be appreciated that variations may be made in 
35 those embodiments by persons skilled in the arts without departing from the scope 
of the present invention as defined by the following claims. 



